<template>
  <div id="loginbody">
    <div id="loginView">
      <h2 style="margin-bottom: 16px; text-align: center">用户登录</h2>
    <el-form 
      style="max-width: 480px; margin: 0 auto"
      :model="form" 
      :rules="rules" 
      ref="loginForm" 
      label-position="left"
      label-width="80px">
      
      <el-form-item label="电话号码" prop="tel">
        <el-input 
          v-model="form.tel"  
          placeholder="请输入电话号码"
          clearable 
        ></el-input>
      </el-form-item>
      
      <el-form-item label="密码" prop="password">
        <el-input 
          v-model="form.password"  
          type="password"
          placeholder="请输入密码"
          show-password 
          clearable 
        ></el-input>
      </el-form-item>
      
      <el-form-item style="margin-top: 24px">
        <el-button 
          style="width: 120px" 
          type="primary" 
          @click="handleLogin"
          :loading="loading"
        >
          登录 
        </el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>
 
<script>
import service from "@/utils/httpRequest";
import store from "@/store";
import router from "@/router";
 
export default {
  data() {
    return {
      loading: false,
      form: {
        tel: '',
        password: ''
      },
      rules: {
        tel: [
          { required: true, message: '不能为空' },
          { pattern: /^1[3-9]\d{9}$/, message: '需为11位有效号码' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少6位', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    async handleLogin() {
      try {
        this.loading  = true;
        const valid = await this.$refs.loginForm.validate(); 
        if (!valid) return; 
        
        const res = await service.post('/lovehelp/fellow/login',  this.form); 
        console.log(' 登录响应:', res);
        
        if (res.code  === 200) {
          await store.dispatch("user/getLoginUser"); 
          this.$message({
            message: '登录成功',
            type: 'success',
            duration: 1500,
            onClose: () => router.replace('/home/activity') 
          });
        } else {
          this.$message.error(res.msg  || '登录失败');
        }
      } catch (error) {
        console.error(' 登录错误:', error);
        const msg = error.response?.data?.msg  || error.message; 
        this.$message.error(` 登录失败：${msg}`);
      } finally {
        this.loading  = false;
      }
    },
  },
};
</script>
 
<style scoped>
#loginbody {
  background: 
    linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
    url('../../../assets/beijing.jpg')  no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  padding: 20px;
}

#loginView {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  margin-top: 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: white;
  padding: 40px;
  /* background-image: url('../../../assets/beijing.jpg'); */
}
 
.el-form {
  padding-top: 20px;
}
 
.el-input {
  width: 100%;
}
 
h2 {
  color: #303133;
  font-size: 24px;
  font-weight: 500;
}
</style>